{% extends "base.html" %}
{% load i18n %}

{% block page_title %}
Pinball - Schedule
{% endblock %}

{% block javascript %}
<script type="text/javascript" charset="utf-8">
    function jobClick(job) {
        return function() {
            flipNodeSelection(job);
        }
    }

    /**
     * Format a row in the jobs table.
     * @param {Object} nRow "TR" element for the current row.
     * @param {Array} aData The data corresponding to the row.
     * @param {number} iDataIndex The index of this row in the data.
     */
    function addJobLinks(nRow, aData, iDataIndex) {
        $('td:eq(0)', nRow).click(jobClick(aData["job"]));
        var info  = '<b>' + aData["job_type"] + '</b>: ' + aData["info"];
        if (aData["priority"] !== 0) {
            info += "<br/><b>priority</b>: " + aData["priority"];
        }
        if (aData["emails"].length > 0) {
            info += "<br/><b>emails</b>: " + aData["emails"].join(" ");
        }
        if (aData["max_attempts"] > 1) {
            info += "<br/><b>max_attempts</b>: " + aData["max_attempts"];
        }
        if (aData["retry_delay_sec"] > 0) {
            info += "<br/><b>retry_delay_sec</b>: " + aData["retry_delay_sec"];
        }
        var warnTimeoutSec = aData["warn_timeout_sec"]
        if (warnTimeoutSec !== null) {
            info += "<br/><b>warn_timeout</b>: " +
                jintervals(warnTimeoutSec, "{D}d {h}h {m}m {s}s");
        }
        var abortTimeoutSec = aData["abort_timeout_sec"]
        if (abortTimeoutSec !== null) {
            info += "<br/><b>abort_timeout</b>: " +
                jintervals(abortTimeoutSec, "{D}d {h}h {m}m {s}s");
        }
        $('td:eq(1)', nRow).html(info);
        $('td:eq(2)', nRow).html(aData["inputs"].join(" "));
        $('td:eq(3)', nRow).html(aData["outputs"].join(" "));
    }

    /**
     * Send poisoning request to the server.
     */
    function poison() {
        roots = getSelectedJobs().join();
        makeAjaxCall("/ajax/command/?" + $.param({
                         "command": "poison",
                         "workflow": "{{ request.GET.workflow }}",
                         "jobs": roots}),
                     "",
                     commandCallback("#modal-poison"));
    }

    init = function() {
        baseInit();
        var recurrenceSecondsStr = $("#recurrence").html();
        var recurrenceSeconds = parseInt(recurrenceSecondsStr, 10);
        var recurrence = jintervals(recurrenceSeconds, "{D}d {h}h {m}m {s}s");
        $("#recurrence").html(recurrence);
        $("#modal-poison").on("show.bs.modal", function (e) {
            showJobs();
        });
        $("#graph").load("/graph/?workflow={{ request.GET.workflow }}",
                         graphLoaded);

        oTable = $('#jobs').dataTable({
            // "sDom": "r<'row'<'span6'l><'span6'>f>t<'row'<'span6'i><'span6'>p>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            },
            "bProcessing": true,
            "sAjaxSource": "/ajax/jobs_from_config/?workflow=" +
                           "{{ request.GET.workflow }}",
            "fnCreatedRow": addJobLinks,
            "aoColumns": [
                { "mData": "job" },
                { "mData": "info" },
                { "mData": "inputs" },
                { "mData": "outputs" }
            ],
            "fnServerData": getTableData,
            "aLengthMenu": [[10, 25, 50, 100, -1],
                            [10, 25, 50, 100, "All"]],
        });
    };
</script>
{% endblock %}

{% block schedules_active %}
class="active"
{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb">
  <li></li>
  <li class="active">{{ request.GET.workflow }}</li>
  <li class="dropdown pull-right">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Action<span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li class="description" title="Remove from the schedule">
          <a tabindex="-1" href="#modal-unschedule" data-toggle="modal">Unschedule</a>
        </li>
        <li class="description" title="Start a new instance">
          <a tabindex="-1" href="#modal-start" data-toggle="modal">Start</a>
        </li>
        <li class="description" title="Run the selected jobs and all its direct and indirect dependents">
          <a tabindex="-1" href="#modal-poison" data-toggle="modal">Poison</a>
        </li>
      </ul>
  </li>
</ol>
{% endblock breadcrumb %}

{% block modal %}
{% include 'modal.html' with modal_id='modal-unschedule' command='unschedule' title='Unschedule' ctx='&workflow='|add:request.GET.workflow description='Remove workflow <b>'|add:request.GET.workflow|add:'</b> from schedule'|safe %}
{% include 'modal.html' with modal_id='modal-start' command='start' title='Start' ctx='&workflow='|add:request.GET.workflow description='Start a new instance of workflow <b>'|add:request.GET.workflow|add:'</b>'|safe %}
{% include 'modal.html' with modal_id='modal-poison' title='Poison' onclick='poison()' description='Poison workflow <b>'|add:request.GET.workflow|add:'</b> roots <b><span id="poison-jobs"></span></b>'|safe %}
{% endblock modal %}

{% block content %}
<div class="row">
  <a href="#graph"><i class="icon-arrow-down"></i>workflow graph</a>
  &nbsp;&nbsp;
  <a href="#jobs"><i class="icon-arrow-down"></i>jobs list</a>
  <table class="table table-hover table-bordered">
    <tbody>
      <tr><td width='15%'>Workflow</td><td>{{ request.GET.workflow }}</td></tr>
      <tr><td>Next run time</td><td>{{ next_run_time }}</td></tr>
      <tr>
          <td>Recurrence</td>
          <td id="recurrence">{{ recurrence_seconds }}</td>
      </tr>
      <tr>
          <td>Overrun policy</td>
          <td>
              <abbr title="{{ overrun_policy_help }}">
                  {{ overrun_policy }}
              </abbr>
          </td>
      </tr>
      <tr><td>Notification email(s)</td><td>{{ emails }}</td></tr>
    </tbody>
  </table>
  <a href="#jobs"><i class="icon-arrow-down"></i>jobs list</a>
  {% include 'svg.html' %}
  <table cellpadding="0" cellspacing="0" border="0"
         class="table table-striped table-bordered" id="jobs">
    <thead><tr>
        <th width="10%">Job</th>
        <th width="50%">Info</th>
        <th width="20%">Inputs</th>
        <th width="20%">Outputs</th>
    </tr></thead>
    <tbody></tbody>
  </table>
</div>
{% endblock %}
